<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内置指令</title>
        <style>
            .wrapper {
                border: 1px solid blue ;
            }
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                姓名: <input type="text" v-model="name" placeholder="请输入姓名">
                性别: <input type="radio" v-model="gender" value="female"> 女士
                     <input type="radio" v-model="gender" value="male"> 先生
                     <input type="radio" v-model="gender" value="unknow"> 未知
                <p v-show="gender == 'female'">{{name}}女士</p>
                <p v-show="gender == 'male'">{{name}}先生</p>
                <hr>
                <p v-once>{{name}}, {{gender}}</p>
            </div>
        </div>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-once">vue.js API: 内置指令(v-once)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        name: '阿芳',
                        gender: 'female'
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>